<template>
    <div class="registered">
<!--   引用登录     -->
<!--        <login ></login>-->

        <div class="registered_join">加入 <span style="font-weight: bold">ZERO CLUB</span></div>
        <div class="registered_become">成为 ZERO Club 会员便可在下次于 Zero.com 购物时享有 10% 的折扣礼券。</div>
        <div style="width: 600px;height: 300px;margin-left: 100px;margin-top: 10px;">
            <div style="text-align: left;">
                <div style="width: 100px;margin-left: 100px"><span class="asterisk">*</span>邮箱:</div>
                <div style="width: 400px;margin-left: 100px">
                    <el-input v-model="email" placeholder="请输入邮箱:"  id="registered_email"></el-input>
                </div>
            </div>
            <div style="text-align: left;margin-top: 10px">
                <div style="width: 100px;margin-left: 100px"><span class="asterisk">*</span>用户名:</div>
                <div style="width: 400px;margin-left: 100px">
                    <el-input v-model="username" placeholder="请输入用户名:" id="registered_username"></el-input>
                </div>
            </div>
            <div style="text-align: left;margin-top: 10px">
                <div style="width: 100px;margin-left: 100px"><span class="asterisk">*</span>密码:</div>
                <div style="width: 400px;margin-left: 100px">
                    <el-input v-model="password" placeholder="请输入密码:" id="registered_password"  show-password></el-input>
                </div>
            </div>
            <div style="text-align: left;margin-top: 10px">
                <div style="width: 100px;margin-left: 100px"><span class="asterisk">*</span>确认密码:</div>
                <div style="width: 400px;margin-left: 100px">
                    <el-input v-model="passwordAgain" placeholder="请确认密码:" id="registered_password_again" show-password></el-input>
                </div>
            </div>
        </div><br>
        <div style="float: left;margin-left:200px;"><el-checkbox label="是，我希望订阅 ZERO CLUB 会员。" name="type"></el-checkbox></div>
        <div style=" font-size: 10px;color: #727272;float: left;margin-left:200px;margin-top: 10px">本人签署此表格/收据，以示加入 Swarovski Club，并已细阅且接纳一般条款与细则。</div>
        <div style=" font-size: 10px;color: #727272;float: left;margin-left:200px;">本人理解有关本人的信息将根据施华洛世奇隐私政策进行处理。</div>
        <div style="margin-top: 100px;text-align: center;" @click.once="registeredCheck()"><el-radio-button class="registered_button" >注册</el-radio-button></div>
        <div style="font-size: 10px;float: left;margin-left:200px;margin-top: 20px">已是 Zero Club 会员？<a href="http://localhost:8080/#/login">请在此登录</a></div>
    </div>
</template>

<script>
    import {registeredGoodsApi} from "@/api/lj_port/interface";
    import Login from "./Login";
    export default {
        name: "registered",
        components: {Login},
        data(){
            return{
                email:'',
                username:'',
                password:'',
                passwordAgain:'',
                checkEmail:3,
                checkUsername:3,
                checkPassword:3,
                checkPasswordAgain:3
            }
        },
        methods:{
            goLogin(){
                this.$router.push({
                    path:'/login',
                });
            },
            registeredCheck()
            {
                let row = {
                    "account":this.email,
                    "username":this.username,
                    "password":this.password

                }
                if(this.email !='' && this.username !='' && this.password !='' && this.passwordAgain !='' &&this.password == this.passwordAgain){
                    registeredGoodsApi(row).then(() =>{
                        this.$message({type: 'success', message: '注册成功!'})
                        this.goLogin()
                    })
                }else{
                    this.$message({type: 'error', message: '注册失败!'})
                }

            },

        },

    }
</script>

<style lang="scss" scoped>
    .registered{
        width: 800px;
        height: 700px;
        margin: 50px auto;
    .asterisk{
        color: red;
    }
    .registered_join{
        text-align: center;
        margin-top: 20px;
        font-size: 20px;
    }
    .registered_become{
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
        color: #727272;
    }
    .registered_paw{
        margin-top: 10px;
    }
    .registered_button{
         /deep/.el-radio-button__inner{
        background-color: black !important;
    }
    }
    }
</style>
